<script setup>
import { ref, reactive, watch } from "vue";
let firstname = ref("");
let lastname = reactive({ name: "" });
let fullname = ref("");

// 监听一个 ref 响应式数据
watch(firstname, (newValue, oldValue) => {
  console.log(`${oldValue}变为${newValue}`);
  fullname.value = firstname.value + lastname.name;
});
// 监听一个 reactive 响应式数据的指定属性
watch(
  () => lastname.name,
  (newValue, oldValue) => {
    console.log(`${oldValue}变为${newValue}`);
    fullname.value = firstname.value+lastname.name
  }
);
// 监听 reactive 响应式数据的所有属性（深度监视）
// deep:true 深度监视
// immediate：true 深度监视在进入页面时立即实行一次
  // watch(()=>lastname,(newValue,oldValue)=>{
  //   // 此时的 newValue 和 oldValue 都是一样的，都是 lastname
  //   console.log(oldValue)
  //   console.log(newValue)
  //   fullname.value=firstname.value+lastname.name
  // },{deep:true,immediate:false})

</script>

<template>
  <div>
    全名：{{fullname}}<br>
    姓：<input type = "text" v-model='firstname'><br>
    名：<input type = "text" v-model="lastname.name"><br>

  </div>
</template>

<style scoped></style>
